<template>
  <div class="div-margin">
    <div class="second-div">
      <h5 class="one-h5">标签类型</h5>
      <el-scrollbar style="height: 90%">
        <div class="thirdly-div">
          <div v-for="(item,index) in tagsTypeList" :key="index" style="width: 80%; margin: 0 auto; text-align: center; position: relative">
            <el-input @focus="globalEditControl = true"
                      maxlength="20"
                      class="tags-type-input-with"
                      v-if="item.type=='global' && item.showType=='edit'"
                      v-model="item.name" size="small" :ref="'alterTags' + index"
                      @keyup.enter.native="()=>{item.showType='view';}"
                      style="width: 70%"
                      @blur="saveTags(item)">
            </el-input>
            <el-button :disabled="globalEditControl" size="medium "
                       v-if="item.type=='system' || item.showType=='view'"
                       color="white"
                       class="tags-list"
                       style="white-space: normal; color: #151518; width: 70%">
              {{item.name}}
            </el-button>
            <el-button icon="el-icon-edit"
                       v-if="index !== 0"
                       :disabled="globalEditControl"
                       @click="editTagsType(item,index)"
                       type="text"
                       style="position: absolute; top: 30%; left: 85%">
            </el-button>
            <el-button icon="el-icon-close"
                       v-if="index !== 0"
                       :disabled="globalEditControl"
                       @click="deleteTag(index)"
                       type="text"
                       style="position: absolute; top: 28%; left: 92%; font-size: 18px">
            </el-button>
          </div>
          <el-input
            maxlength="20"
            class="add-tags-input"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          ></el-input>
          <el-button :disabled="globalEditControl" v-else size="small" type="primary" class="add-tags" @click="addTags">添加标签</el-button>
        </div>
      </el-scrollbar>
    </div>
    <div class="type-group">
      <h5 class="one-h5">标签组</h5>
      <div class="tags-group">
        <el-button type="text" v-for="(item,index) in tagsTypeList[0].groups" :key="index">{{item.name}}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {getSystemTagsList, saveSystemTags} from "@/api/system/creative_tags";
import {validStr} from "@/util/validate";

export default {
  name: "pcAddTagsType",
  data(){
    return{
      tagsTypeList: [{
        name: "系统标签",
        type: 'system',
        showType: 'view',
        groups: [
          {	name: '',
            type: 'system',/*不可删除，对应于程序生成规则*/
            code: 'xxx',/*程序生成规则所用的code*/
          }
        ],
      }],
      buttonEdit: true,
      inputEdit: false,
      inputEditValue: '',
      inputVisible: false,
      inputValue: '',
      addTagsValue: {},
      globalEditControl: false
    }
  },
  created() {
    getSystemTagsList().then(res =>{
      if (res.data.data.length !== 0){
        this.tagsTypeList = res.data.data
      }
      console.log(res.data.data.length)
    })
  },
  methods: {
    deleteTag(index) {
      this.$confirm('确定删除标签类型?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tagsTypeList.splice(index, 1);
        let data = JSON.stringify(this.tagsTypeList)
        saveSystemTags(data).then(() =>{
          this.$message.success("删除成功！")
        })
      })
    },
    saveTags(item){
      if (validStr(item.name)) {
        this.$message.info("类型名无效！")
      } else {

        let flag = true
        let count = 0
        this.tagsTypeList.forEach(type => {
          if (type.name === item.name) {
            if (++count === 2) {
              this.$message.info("类型重复！")
              flag = false
            }
          }
        })
        if (flag) {
          item.showType='view'
          let data = JSON.stringify(this.tagsTypeList)
          saveSystemTags(data).then(() => {
            this.$message.success("更新成功！")
          }).finally(() => {
            this.globalEditControl = false
          })
        }
      }
    },
    editTagsType(item,index){
      this.globalEditControl = true
      if(item.type==='global'){
        item.showType='edit'}
      this.$nextTick(() => {
        this.$refs['alterTags' + index][0].focus();
      })
    },
    addTags(){
      this.globalEditControl = true
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    alterType(){
      this.inputEdit = true;
      this.buttonEdit = false
      // this.$nextTick(_ => {
      //   this.$refs.alterTags.$refs.input.focus();
      // });
    },
    handleInputConfirm: function () {
      let inputValue = this.inputValue;
      this.addTagsValue = {
        name: inputValue,
        type: 'global',
        showType: 'view',
        groups: [],
      }
      let inputView = this.addTagsValue
      if (!validStr(inputView.name)) {
        let flag = true
        this.tagsTypeList.forEach(type => {
          if (type.name === inputValue) {
            this.$message.info("类型重复！")
            flag = false
          }
        })
        if (flag) {
          this.tagsTypeList.push(inputView);
          let data = JSON.stringify(this.tagsTypeList)
          saveSystemTags(data).then(() => {
            this.$message.success("更新成功！")
          })
        } else {
          this.globalEditControl = false
          return
        }
      } else {
        this.$message.info("类型名无效！")
        return
      }
      this.globalEditControl = false
      this.inputVisible = false;
      this.inputValue = '';
    },
    editContent(){
      this.buttonEdit = true
      this.inputEdit = false
    }
  }
}
</script>

<style scoped>
.div-margin {
  background-color: #fbfdff;
  width: 100%;
  height: 90%;
  padding-top: 1px;
  display: flex
}
.second-div{
  width: 30%;
  height: 100%;
}
.one-h5{
  color: #72767b;
  text-align: center
}
.thirdly-div{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.add-tags{
  width: 100px;
  margin-left: 3px;
  margin-top: 30px;
  min-width: 100px
}
.tags-list{
  min-width: 100px;
  margin-top: 20px;
  color: #72767b;
  text-align: center;
}
.tags-type-input-with{
  width: 100px;
  margin-top: 30px;
}
.add-tags-input{
  width: 100px;
  margin-top: 30px;
  min-width: 100px
}
.type-group{
  width: 30%;
  /*height: 100%;*/
}
.tags-group{
  width: 100%;
  /*height: 100%;*/
  display: flex;
  flex-direction: column;
}
</style>
